<template>
  <div class="category-second-page xtx-wrapper">
    <div class="container">
      <xtx-bread>关键字 “{{ keyword }}” 的搜索结果：</xtx-bread>
      <!-- 筛选区 -->
      <div class="xtx-filter">
        <div class="item">
          <div class="head">分类：</div>
          <div class="body">
            <a
              :class="{ active: filterParams.categoryId === category.id }"
              @click="filterParams.categoryId = category.id"
              href="javascript:;"
              v-for="category in conditions.categories"
              :key="category.id"
              >{{ category.name }}
            </a>
          </div>
        </div>
        <div class="item">
          <div class="head">品牌：</div>
          <div class="body">
            <a
              :class="{ active: filterParams.brandId === brand.id }"
              @click="filterParams.brandId = brand.id"
              href="javascript:;"
              v-for="brand in conditions.brands"
              :key="brand.id"
              >{{ brand.name }}
            </a>
          </div>
        </div>
      </div>
      <!-- 结果区 -->
      <div class="xtx-result">
        <div class="order clearfix">
          <div class="fl">
            <a
              @click="changeSortType(1)"
              :class="{ active: filterParams.sortType === 1 }"
              class="xtx-type"
              href="javascript:;"
              >最新商品</a
            >
            <a
              @click="changeSortType(2)"
              :class="{ active: filterParams.sortType === 2 }"
              class="xtx-type"
              href="javascript:;"
              >最高人气</a
            >
            <a
              @click="changeSortType(3)"
              :class="{ active: filterParams.sortType === 3 }"
              class="xtx-type"
              href="javascript:;"
              >评论最多</a
            >
            <a
              @click="changeSortType(filterParams.sortType === 5 ? 4 : 5)"
              class="xtx-type"
              href="javascript:;"
            >
              价格排序
              <span>
                <i
                  class="iconfont icon-arrow-up"
                  :class="{ active: filterParams.sortType === 4 }"
                ></i>
                <i
                  class="iconfont icon-arrow-down"
                  :class="{ active: filterParams.sortType === 5 }"
                ></i>
              </span>
            </a>
          </div>
          <div class="fr">
            <xtx-checkbox v-model="filterParams.hasInventory">仅显示有货商品</xtx-checkbox>
            <xtx-checkbox v-model="filterParams.hasSale">仅显示特惠商品</xtx-checkbox>
          </div>
        </div>
        <div class="product">
          <ul>
            <li v-for="item in goods" :key="item.id">
              <router-link :to="`/product/${item.id}`">
                <img :src="item.picture" alt="" />
                <p class="name ">{{ item.name }}</p>
                <p class="desc">{{ item.desc }}</p>
                <p class="price">¥{{ item.price }}</p>
              </router-link>
            </li>
          </ul>
        </div>
        <!-- 加载更多 -->
        <infinite-loading
          v-if="initCom"
          @infinite="getGoods"
          :distance="0"
          spinner="waveDots"
          style="padding: 100px"
        >
          <div slot="no-more" class="noMore">
            <img src="../../assets/images/none.png" alt="" />
            <p>亲，没有符合条件的商品了</p>
          </div>
        </infinite-loading>
      </div>
    </div>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
export default {
  name: 'category-second-page',
  components: { InfiniteLoading },
  data () {
    return {
      // 请求后台的条件
      filterParams: {
        hasInventory: false,
        hasSale: false,
        sortType: undefined,
        brandId: undefined,
        categoryId: undefined
      },
      pageParams: {
        page: 1,
        pagesize: 16
      },
      // 分类数据
      conditions: {},
      // 品牌数据
      brands: [],
      // 商品列表,
      goods: [],
      // 初始化组件
      initCom: true
    }
  },
  computed: {
    keyword () {
      return decodeURIComponent(this.$route.query.keyword)
    }
  },
  watch: {
    filterParams: {
      handler () {
        this.pageParams.page = 1
        this.goods = []
        this.initCom = false
        this.$nextTick(() => {
          this.initCom = true
        })
      },
      deep: true
    },
    keyword () {
      this.getFilter()
      this.filterParams = {
        hasInventory: false,
        hasSale: false,
        sortType: undefined,
        brandId: undefined,
        categoryId: undefined
      }
      this.pageParams.page = 1
      this.goods = []
      this.initCom = false
      this.$nextTick(() => {
        this.initCom = true
      })
    }
  },
  methods: {
    getGoods ($state) {
      this.$http
        .post('/search/all', {
          ...{ keyword: this.keyword },
          ...this.filterParams,
          ...this.pageParams
        })
        .then((res) => {
          window.setTimeout(() => {
            if (res.data.result.pageData.items.length) {
              this.conditions = res.data.result.conditions
              this.goods.push(...res.data.result.pageData.items)
              $state.loaded()
              this.pageParams.page++
            } else {
              $state.complete()
            }
          }, 1000)
        })
    },
    changeSortType (type) {
      this.filterParams.sortType = type
    },
    changAttr (id, groupId) {
      const obj = this.filterParams.attrs.find((item) => item.id === id)
      obj.groupId = groupId
    }
  }
}
</script>

<style scoped lang='less'>
@import "./styles/sub.less";
</style>
